<template>
	<view>
		<view class="head">
			<view class="title">到账账户</view>
			<view class="uni-form-item uni-column">
				<picker @change="bindPickerChange" :range="array">
					<label>{{array[index]}}</label>
				</picker>
			</view>
			<view class="item">
				<text>可提现：{{money}}元</text>
				<button type="button">全部提现</button>
			</view>
			<view class="footer">
				<label>提现金额：</label>
				<input type="text" placeholder="输入金额大于" class="input" v-model="inputNum"/>
			</view>
		</view>
		<view class="content">
			<button type="button" class="btn1">取消</button>
			<button type="button" class="btn2">确定</button>
		</view>
		<view class="toast" v-if="!isshow">
			<view class="txt1">提现成功</view>
			<view class="txt2">到账可能会有延迟，请耐心等待</view>
			<view class="txt3">确定</view>
		</view>
		<view class="count" v-if="!show">
			<view class="check">选择到账账户</view>
			<view class="bankcount">
				<view class="bank">
					<text style="font-size: 30rpx;">工商银行</text>
					<text style="margin-left: 29rpx;font-size: 24rpx;">6220**************1245</text>
					<checkbox value="cb" style="margin-left: 179rpx;"></checkbox>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			array:['中国工商银行 6220***********123', '中国建设银行 6223***********374','中国银行 6210***********669'],
			index:0,
			money:5000,
			inputNum:'',
			isshow:false,
			show:true
		}
	},
	methods: {
		bindPickerChange(e){
			this.index = e.target.value
			this.jg = this.array[index]
		}
	}
}
</script>
<style>
	page {
		background: rgb(245, 245, 245);
	}
	.head {
		width: 690rpx;
		height: 364rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		padding-top: 14rpx;
	}
	.title {
		margin: 20rpx 28rpx; 
		font-size: 30rpx;
		color: #333;
	}
	.uni-form-item {
		margin: 37rpx 30rpx;
		padding-left: 20rpx;
		width: 600rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		margin: 37rpx 30rpx;
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
	.item button {
		width: 160rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #FFFFFF;
		border: 1px solid #BFBFBF;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-left: 250rpx;
	}
	.footer {
		margin: 30rpx;
		display: flex;
        flex-direction: row;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
		align-items: center;
	}
	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 40px 50rpx;
	}
	.content button {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
		border-radius: 40rpx;
	}
	.btn1 {
		background: rgb(245, 245, 245);
		border: 1px solid #BFBFBF;
	}
	.btn2 {
		background: #FEB140;
	} 
	.toast {
		width: 500rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 10rpx 125rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		padding-top: 60rpx;
		text-align: center;
	}
	.txt1 {
		font-size: 30rpx;
	}
	.txt2 {
		font-size: 24rpx;
		margin: 40rpx auto;
	}
	.txt3 {
		font-size: 30rpx;
		margin: 60rpx auto;
	}
	.count {
		width: 750rpx;
		height: 221rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		margin-top: 70rpx;
	}
	.check {
		margin: 39rpx 280rpx 40rpx 280rpx;
		padding-top: 39rpx;
		font-size: 30rpx;
	}
	.bank {
		display: flex;
		flex-direction: row;
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		margin: 30rpx 50rpx 20rpx 50rpx;
	}
</style>
